<template>
	<el-row class="member-dept-default">
		<el-input
			placeholder="请输入内容"
			v-model="inputVal"
			size="small"
			class="input-with-select"
		/>
		<el-tree
			class="member-dept-default-item"
			:data="treeData"
			@check-change="handleCheckChange"
			:default-checked-keys="defaultCheckedKeys"
			:filter-node-method="filterNode"
			:check-strictly="true"
			ref="tree1"
			v-on="$listeners"
			show-checkbox
			node-key="id"
			:props="defaultProps"
		>
		</el-tree>
	</el-row>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch, Ref } from 'vue-property-decorator';
@Component({
  name: 'memberOrDeptDefault',
  components: {}
})
export default class extends Vue {
  @Prop(Object) public defaultProps!: any;
  @Prop(Array) public defaultCheckedKeys!: any[];
  @Prop(Number) public value!: any;
  @Prop(Array) public treeData!: any[];
  private inputVal = '';
  private currValue = '';
  @Ref() private tree1: any;
  public setCheckedNodes (valueArr: number[] = []) {
    this.tree1.setCheckedKeys(valueArr);
  }

  public clearCheck () {
    this.tree1.setCheckedKeys([]);
  }

  public resetInputVal () {
    this.inputVal = '';
  }

  public resetCurrValue () {
    this.currValue = '';
  }

  @Watch('inputVal')
  private valueInput (val: any) {
    this.tree1.filter(val);
  }

  @Watch('defaultCheckedKeys')
  private valuekeys (val: any) {
    this.tree1.setCheckedKeys(val);
  }

  private handleCheckChange (data, checked, indeterminate) {
    const arr = this.tree1.getCheckedNodes() || [];
    this.$emit(
      'handleCheckChange',
      arr.map((item1) => item1[this.defaultProps.id])
    );
  }

  private filterNode (value: any, data: any) {
    if (!value) {
      return true;
    }
    if (this.treeData && this.treeData.length !== 0) {
      const str = (this.defaultProps && this.defaultProps.label) || 'name';
      return data[str].indexOf(value) !== -1;
    } else {
      return true;
    }
  }
}
</script>

<style lang="stylus" scoped>
	.member-dept-default {
		height: 280px;
		overflow-y: auto;
		position: relative;
	}

	.input-with-select {
		position: sticky;
		margin-bottom: 10px;
		top: 0;
	}
</style>
